<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>jQuery Tab菜单插件</title>
  <link rel="stylesheet" href="css/reset.min.css">
 <link rel="stylesheet" href="css/pro.css">

  <script src='common/jquery.min.js'></script>

  <script  src="common/index.js"></script>

  <script>
    function checkdatebox()
    { //jquery获取复选框值
      var chk_value = [];
      $('input[name="color_box"]:checked').each(function () {
        chk_value.push($(this).val());
      });
      $.ajax({
        type: "post",
        url: "list.php",
        data: {
          "data": chk_value,
        },
        success: function (msg) {
          $('#content').html(msg);
        },
        error:function() {
          alert("发送失败");
        }
      })
    }
  </script>

</head>

<body>


  <div class="tab-wrapper">
  <ul class="tab-menu">
    <li class="active">COLOR</li><span>|</span>
    <li>SHAPE</li><span>|</span>
    <li>RIM</li><span>|</span>
    <li>MATERIAL</li>
  </ul>
  
  <div class="tab-content">
    <div class="boxcolor">
      <label><input type="checkbox" name="color_box" value="Red" onclick="checkdatebox()"><i class="spot_red"></i><i class="chk_txt">Red</i></label>
      <label><input type="checkbox" name="color_box"  value="Orange" onclick="checkdatebox()"><i class="spot_orange"></i><i class="chk_txt">Orange</i></label>
      <label><input type="checkbox" name="color_box"  value="Yellow" onclick="checkdatebox()"><i class="spot_yellow"></i><i class="chk_txt">Yellow</i></label>
      <label><input type="checkbox" name="color_box"  value="Coffee" onclick="checkdatebox()"><i class="spot_coffee"></i><i class="chk_txt">Coffee</i></label>
      <label><input type="checkbox" name="color_box"  value="Brown" onclick="checkdatebox()"><i class="spot_brown"></i><i class="chk_txt">Brown</i></label>
      <label><input type="checkbox" name="color_box"  value="Green" onclick="checkdatebox()"><i class="spot_green"></i><i class="chk_txt">Green</i></label>
      <label><input type="checkbox" name="color_box"  value="Blue" onclick="checkdatebox()"><i class="spot_blue"></i><i class="chk_txt">Blue</i></label>
      <label><input type="checkbox" name="color_box"  value="Navy" onclick="checkdatebox()"><i class="spot_navy"></i><i class="chk_txt">Navy</i></label>
      <label><input type="checkbox" name="color_box"  value="Violet" onclick="checkdatebox()"><i class="spot_violet"></i><i class="chk_txt">Violet</i></label>
      <label><input type="checkbox" name="color_box"  value="Aqua" onclick="checkdatebox()"><i class="spot_aqua"></i><i class="chk_txt">Aqua</i></label>
      <label><input type="checkbox" name="color_box"  value="Purple" onclick="checkdatebox()"><i class="spot_purple"></i><i class="chk_txt">Purple</i></label>
      <label><input type="checkbox" name="color_box"  value="Wine" onclick="checkdatebox()"><i class="spot_wine"></i><i class="chk_txt">Wine</i></label>
      <label><input type="checkbox" name="color_box"  value="Grey" onclick="checkdatebox()"><i class="spot_grey"></i><i class="chk_txt">Grey</i></label>
      <label><input type="checkbox" name="color_box"  value="Black" onclick="checkdatebox()"><i class="spot_black"></i><i class="chk_txt">Black</i></label>
      <label><input type="checkbox" name="color_box"  value="Gold" onclick="checkdatebox()"><i class="spot_gold"></i><i class="chk_txt">Gold</i></label>
      <label><input type="checkbox" name="color_box"  value="Silver" onclick="checkdatebox()"><i class="spot_silver"></i><i class="chk_txt">Silver</i></label>
      <label><input type="checkbox" name="color_box"  value="Tortoise" onclick="checkdatebox()"><i class="spot_tortoise"></i><i class="chk_txt">Tortoise</i></label>
      <label><input type="checkbox" name="color_box"  value="Pink" onclick="checkdatebox()"><i class="spot_pink"></i><i class="chk_txt">Pink</i></label>
      <label><input type="checkbox" name="color_box"  value="White" onclick="checkdatebox()"><i class="spot_white"></i><i class="chk_txt">White</i></label>
      <label><input type="checkbox" name="color_box"  value="Crystal" onclick="checkdatebox()"><i class="spot_crystal"></i><i class="chk_txt">Crystal</i></label>
    </div>
    <div class="boxshape">
      <label><input type="checkbox" name="shape_box"><i class="chk_txt">Square</i></label>
      <label><input type="checkbox" name="shape_box"><i class="chk_txt">Cat</i></label>
      <label><input type="checkbox" name="shape_box"><i class="chk_txt">Round</i></label>
      <label><input type="checkbox" name="shape_box"><i class="chk_txt">Oval</i></label>
    </div>
    <div class="boxrim">
      <label><input type="checkbox" name="rim_box"><i class="chk_txt">Full Rim</i></label>
      <label><input type="checkbox" name="rim_box"><i class="chk_txt">Half-Rim</i></label>
      <label><input type="checkbox" name="rim_box"><i class="chk_txt">Rim-Less</i></label>
    </div>
    <div class="boxmaterial">
      <label><input type="checkbox" name="mat_box"><i class="chk_txt">Acetate</i></label>
      <label><input type="checkbox" name="mat_box"><i class="chk_txt">Metal</i></label>
      <label><input type="checkbox" name="mat_box"><i class="chk_txt">Titanium</i></label>
      <label><input type="checkbox" name="mat_box"><i class="chk_txt">TR-90</i></label>
      <label><input type="checkbox" name="mat_box"><i class="chk_txt">Kids Sunglasses</i></label>
    </div>
  </div>



</div>
</body>
</html>
